<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过面向过程实现弹出框</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				font-size: 12px;
			}
			#dialog{
				position: absolute;
				top:100px;
				left:50%;
				margin-left:-200px;
				width:400px;
				border:1px solid #ccc;
				box-shadow: 0 0 8px #ccc;
				display: none;
			}
			#dialog h3{
				padding:6px 10px;
				border-bottom: 1px solid#ccc;
			}
			#dialog h3 span{
				font-size: 16px;
			}
			#dialog h3 a{
				float: right;
			}
			a{
				text-decoration: none;
			}
			#content{
				padding:10px;
				border-bottom: 1px solid #ccc ;
			}
			#confirm{
				display: block;
				width:50px;
				
				text-align: center;
				line-height: 30px;
				background: blue;
				margin:10px;
				color:#fff;
			}
			#close{
				color:#000;
			}
		</style>
		<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
			window.onload = function(){
				var oBtn = $("btn");
				var oBtn2 = $("btn2");
				var oDialog = $("dialog")
				var oClose =$("close");
				var oConfirm =$("confirm");
				var oTitle = $("title");
				var oContent =$("content")
				oBtn.onclick = function(){
					oDialog.style.display = "block";
					 oTitle.innerHTML = "标题一"
					 oContent.innerHTML = "内容一"
				}
				oBtn2.onclick = function(){
					oDialog.style.display = "block";
					 oTitle.innerHTML = "标题二"
					 oContent.innerHTML = "内容二"
				}
				oClose.onclick = function(){
					oDialog.style.display = "none";
				}
				oConfirm.onclick = function(){
					oDialog.style.display = "none";
				}
			}
		</script>
	</head>
	<body>
		<button id="btn">打开dialog</button>
		<button id="btn2">打开dialog</button>
		<div id="dialog">
			<h3><a href="javascript:;" id="close">&times</a><span id="title">这是标题</span></h3>
			<div id="content">这是要显示的内容</div>
			<a href="javascript:;" id="confirm">确定</a>
		</div>
	</body>
</html>
